import React, { Component, Suspense } from 'react';
import { connect } from 'dva';
import { Row, Col, Card,Button } from 'antd';
import GridContent from '@/components/PageHeaderWrapper/GridContent';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import SensLevel from './SensLevel';
import SensType from './SensType';
import SensWord from './SensWord';
@connect(
  ({ moreStatistics, loading }) => ({
    moreStatistics,
    loadSensLevel: loading.effects['moreStatistics/querySensLevel'], //敏感信息等级
    loadSensType: loading.effects['moreStatistics/querySensType'], //敏感类型
    loadSensWord: loading.effects['moreStatistics/querySensWord'], //敏感信息
  }),
  dispatch => ({
    querySensLevel: e => dispatch({ type: 'moreStatistics/querySensLevel', payload: e }), //敏感信息等级
    querySensType: e => dispatch({ type: 'moreStatistics/querySensType', payload: e }), //敏感类型
    querySensWord: e => dispatch({ type: 'moreStatistics/querySensWord', payload: e }), //敏感信息
  })
)
class MoreStatistics extends Component {
  state = {};
  componentDidMount() {
    this.props.querySensLevel({dbId:this.props.location.query.dbId}); //敏感信息等级
    this.props.querySensType({dbId:this.props.location.query.dbId}); //敏感类型
    this.props.querySensWord({dbId:this.props.location.query.dbId}); //敏感信息
  }

  render() {
    const {
      moreStatistics,     
      loadSensLevel,
      loadSensType,
      loadSensWord,
    } = this.props;
    const {     
      querySensLevelData,
      querySensTypeData,
      querySensWordData,
    } = moreStatistics;
    return (
      <PageHeaderWrapper title="敏感信息统计">
      <GridContent> 
        <Row gutter={24}>
          {/*敏感信息等级*/}
          <Col xxl={12} xl={12} lg={12} md={12} sm={24} xs={24}>
            <Suspense fallback={null}>
              <SensLevel
                loading={loadSensLevel}
                querySensLevelData={querySensLevelData}
              />
            </Suspense>
          </Col>      

           {/*敏感类型*/}
           <Col xxl={12} xl={12} lg={12} md={12} sm={24} xs={24}>
            <Suspense fallback={null}>
              <SensType
                loading={loadSensType}
                querySensTypeData={querySensTypeData}
              />
            </Suspense>
          </Col>      

           {/*敏感字段信息分布，柱状图*/}
           <Col xxl={24} xl={24} lg={24} md={24} sm={24} xs={24}>
            <Suspense fallback={null}>
              <SensWord
                loading={loadSensWord}
                querySensWordData={querySensWordData}
              />
            </Suspense>
          </Col> 
        </Row>
        {/*饼图*/}
        <div style={{ textAlign: 'center' }}>
              <br></br>
              <Button type="primary" onClick={() => this.props.history.goBack()}>
                返回敏感信息列表
              </Button>
            </div>
      </GridContent>
      </PageHeaderWrapper>
    );
  }
}
export default MoreStatistics;
